<template>
	<div id='NavView'>
		<router-link class="link on_home" to="/">首页</router-link>
		<router-link class="link on_assort" to="/assort">分类</router-link>
		<router-link class="link on_cart" to="/cart">购物车</router-link>
		<router-link class="link on_user" to="/user">我的</router-link>
	</div>
</template>

<!-- 公共样式 -->
<style lang='scss' scoped>
// scss 变量
$width: (
	100vw / 375
);

* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

#NavView {
	width: 100vw;
	position: fixed;
	height: 50 * $width;
	bottom: 0;
	display: flex;
	background-color: #fff;
	box-shadow: 0 3 * $width 14 * $width 2 * $width rgb(0 0 0 / 12%);

	.link {
		flex: 1;
		text-align: center;
		box-sizing: border-box;
		color: #999;
		font-size: 10 * $width;
		// 取消a标签在移动端点击时的蓝色
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-moz-user-focus: none;
		// 取消a标签在移动端点击时的蓝色
	}

	.router-link-exact-active {
		color: #f22323;
	}

	.link::before {
		content: "";
		display: block;
		width: 21 * $width;
		height: 21 * $width;
		margin: 0 auto 0.1rem;
		max-width: 30 * $width;
		max-height: 30 * $width;
		background: url(../assets/home.png);
		background-size: cover;
		margin: 0.3rem auto;
	}

	.on_home.router-link-exact-active:before {
		background-image: url(../assets/home_Select.png);
	}

	// 社区
	.on_assort:before {
		background-image: url(../assets/assort.png);
	}

	.on_assort.router-link-exact-active:before {
		background-image: url(../assets/assort_Select.png);
	}

	// 购物车
	.on_cart:before {
		background-image: url(../assets/cart.png);
	}

	.on_cart.router-link-exact-active:before {
		background-image: url(../assets/cart_Select.png);
	}

	// 我的
	.on_user:before {
		background-image: url(../assets/user.png);
	}

	.on_user.router-link-exact-active:before {
		background-image: url(../assets/user_Select.png);
	}
}
</style>
